<template>
  <div class="home">
    <el-carousel :interval="2000" type="card" height="300px">
       
      <el-carousel-item v-for="item in swipeItems" :key="item.id" @click="goto(item.id)">
               
        <el-image :src="item.img" style="width: 650px; height: 300px" />      
      </el-carousel-item>
         
    </el-carousel>
    <el-container>
      <router-view></router-view>
    </el-container>
  </div>
  <el-divider />

  <el-carousel :interval="5000" arrow="always">
    <h2>医院专家</h2>
    <el-carousel-item v-for="item in 4" :key="item">
      <div class="news-list">
        <el-card class="news-item" :body-style="{ padding: '0px' }" v-for="item in doctor" :key="item.id"
          @click="goto(item.docId)">
          <el-image :src="item.img" class="image" />
          <div style="padding: 14px">
            <p class="title">{{ item.docName }}</p>
            <div class="bottom">
              <span class="author">{{ item.author }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </el-carousel-item>
  </el-carousel>
</template>

<script>
import { get } from "@/utils/request";
export default {
  name: "HomeView",
  components: {},
  data() {
    return {
      swipeItems: [],
      doctor: "",
      recommend:[]
    };
  },
  mounted() {

    this.getSwipeItems();
    this.getDoctorsRecommend();
    this.getcarouselRecommend();
  },
  methods: {
    getcarouselRecommend() {
      get("/getcarouselRecommend").then((res) => {
        this.swipeItems = res.data;
        console.log(this.swipeItems);
      });
    },
      getSwipeItems() {
        get("/getAllcarousels", {}).then((res) => {
          this.swipeItems = res.data;
          console.log(this.swipeItems);
        });
      },
      getDoctorsRecommend() {
        get("/getDoctorsRecommend").then((res) => {
          this.doctor = res.data;
          console.log(this.doctor);
        });
      },
      goto(id) {
        this.$router.push({ name: "introduce", params: { id } });
      },
    },
  };
</script>

<style lang="scss" scoped>
.home {
  margin-left: 55px;
}

.news-list {
  padding: 20px;
  display: flex;
  //justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  margin-right: 15px;
  margin-left: 15px;

  .news-item {
    width: 250px;
    margin: 20px 5px;

    .image {
      width: 100%;
      height: 200px;
      overflow: hidden;
    }

    .title {
      font-weight: bold;
      width: 100%;
      margin: 0;
      padding: 0;
      white-space: nowrap; // 强制不换行
      overflow: hidden; // 超出隐藏
      text-overflow: ellipsis; // 超出的文本显示省略号
    }

    .author {
      color: #999999;
      font-size: 12px;
      white-space: nowrap; // 强制不换行
      overflow: hidden; // 超出隐藏
      text-overflow: ellipsis; // 超出的文本显示省略号
    }
  }
}
</style>
